import G6 from "@antv/g6";
import { fittingString } from "./topoService";
import clusterImg from "@/assets/images/topoNodes/cluster.png";

// register custom combo
G6.registerCombo(
  "custom-combo",
  {
    draw(cfg, group) {
      const self = this;
      cfg.labelCfg = {
        refX: 16,
        refY: 19,
        style: {
          fontSize: 16,
          fontWeight: 500,
          fill: "rgba(0, 0, 0, 0.85)",
        },
      };
      const cfgStyle = self.getShapeStyle(cfg);
      const keyShape = group.addShape("rect", {
        attrs: {
          ...cfgStyle,
          x: -cfgStyle.width / 2,
          y: -cfgStyle.height / 2,
          width: cfgStyle.width,
          height: cfgStyle.height,
          fill: "rgba(34, 110, 231, 0.08)",
          cursor: "pointer",
          stroke: "rgba(34, 110, 231, 0.65)",
          radius: 8,
        },
        draggable: true,
        id: "combo-warp",
        name: "combo-warp",
      });
      const labelStyle = self.getLabelStyle(cfg, cfg.labelCfg, group);
      if (cfg.masterName) {
        // 集群外框
        group.addShape("rect", {
          attrs: {
            x: labelStyle.x / 2,
            y: labelStyle.y / 2 - 7,
            width: 76,
            height: 20,
            radius: 2,
            fill: "#F4F4F4",
            lineWidth: 1,
            stroke: "rgba(0, 0, 0, 0.2)",
          },
          id: "cluster-warp",
          name: "cluster-warp",
          draggable: true,
        });
        // 集群图标
        group.addShape("image", {
          attrs: {
            x: labelStyle.x / 2,
            y: labelStyle.y / 2 - 4,
            width: 14,
            height: 14,
            img: "",
          },
          id: "cluster-img",
          name: "cluster-img",
          draggable: true,
        });
        // 集群名字
        group.addShape("text", {
          attrs: {
            x: labelStyle.x / 2,
            y: labelStyle.y / 2 + 9,
            text: fittingString(cfg.masterName, 52, 12),
            fontSize: 12,
            fontWeight: 400,
            fill: "rgba(0, 0, 0, 0.65)",
          },
          id: "cluster-name",
          name: "cluster-name",
          draggable: true,
        });
      }
      // 展开收缩箭头
      group.addShape("circle", {
        attrs: {
          x: labelStyle.x / 2 + 204,
          y: labelStyle.y / 2 + 3,
          r: 8,
          stroke: "#226EE7",
        },
        id: "combo-marker-circle",
        name: "combo-marker-circle",
        draggable: true,
      });
      group.addShape("path", {
        attrs: {
          path: [
            ["M", labelStyle.x / 2 + 200, labelStyle.y / 2 + 1],
            ["L", labelStyle.x / 2 + 204, labelStyle.y / 2 + 5],
            ["L", labelStyle.x / 2 + 208, labelStyle.y / 2 + 1],
          ],
          stroke: "#226EE7",
          lineWidth: 1,
        },
        id: "combo-marker-line",
        name: "combo-marker-line",
        draggable: true,
      });

      return keyShape;
    },
    options: {},
    afterUpdate(cfg, combo) {
      const group = combo.get("group");

      const labelCfg = group.get("children").find((item) => {
        const { type, name } = item.cfg;
        return type === "text" && name === "text-shape";
      });
      if (!labelCfg) return;

      const labelBox = labelCfg.getBBox();
      // 展开收缩
      const comboMarkerCircle = group.findById("combo-marker-circle");
      const comboMarkerLine = group.findById("combo-marker-line");
      comboMarkerCircle.attr({
        x: cfg.style.width / 2 - 8,
        y: labelBox.y + 10,
      });
      // 集群
      const clusterWarp = group.findById("cluster-warp");
      const clusterPic = group.findById("cluster-img");
      const clusterName = group.findById("cluster-name");

      if (cfg.collapsed) {
        cfg.label = fittingString(cfg.labelText, cfg.style.width - 20, 16);
        if (clusterWarp) {
          clusterWarp.attr({
            width: 0,
            height: 0,
            lineWidth: 0,
          });
          clusterPic.attr({
            img: "",
          });
          clusterName.attr({
            fontSize: 0,
          });
        }
        comboMarkerLine.attr({
          path: [
            ["M", cfg.style.width / 2 - 12, labelBox.y + 8],
            ["L", cfg.style.width / 2 - 8, labelBox.y + 12],
            ["L", cfg.style.width / 2 - 4, labelBox.y + 8],
          ],
        });
      } else {
        cfg.label = fittingString(cfg.labelText, cfg.style.width - 96, 16);
        if (clusterWarp) {
          clusterWarp.attr({
            x: labelBox.maxX + 8,
            y: labelBox.y,
            width: 76,
            height: 20,
            lineWidth: 1,
          });
          clusterPic.attr({
            x: labelBox.maxX + 12,
            y: labelBox.y + 3,
            img: clusterImg,
          });
          clusterName.attr({
            x: labelBox.maxX + 28,
            y: labelBox.y + 16,
            fontSize: 12,
          });
        }
        comboMarkerLine.attr({
          path: [
            ["M", cfg.style.width / 2 - 12, labelBox.y + 12],
            ["L", cfg.style.width / 2 - 8, labelBox.y + 8],
            ["L", cfg.style.width / 2 - 4, labelBox.y + 12],
          ],
        });
      }
    },
    // 锚点（相关边的连入点）的数组,如果为 undefined，则没有锚点
    getAnchorPoints(cfg) {
      return undefined;
    },
  },
  "rect"
);

// register custom merge combo
G6.registerCombo(
  "custom-merge-combo",
  {
    draw(cfg, group) {
      const self = this;
      cfg.labelCfg = {
        refX: 16,
        refY: 19,
        style: {
          fontSize: 16,
          fontWeight: 500,
          fill: "rgba(0, 0, 0, 0.85)",
        },
      };
      const cfgStyle = self.getShapeStyle(cfg);
      const keyShape = group.addShape("rect", {
        attrs: {
          ...cfgStyle,
          x: -cfgStyle.width / 2,
          y: -cfgStyle.height / 2,
          width: cfgStyle.width,
          height: cfgStyle.height,
          fill: "rgba(34, 110, 231, 0.08)",
          cursor: "pointer",
          stroke: "rgba(34, 110, 231, 0.65)",
          radius: 8,
        },
        draggable: true,
        id: "combo-warp",
        name: "combo-warp",
      });
      const labelStyle = self.getLabelStyle(cfg, cfg.labelCfg, group);
      // 取消归并
      group.addShape("text", {
        attrs: {
          x: labelStyle.x / 2,
          y: labelStyle.y / 2 + 9,
          text: "取消归并",
          fontSize: 12,
          fill: "#226EE7",
          cursor: "pointer",
        },
        id: "cancel-merge",
        name: "cancel-merge",
        draggable: true,
      });

      return keyShape;
    },

    afterUpdate(cfg, combo) {
      const group = combo.get("group");

      const labelCfg = group.get("children").find((item) => {
        const { type, name } = item.cfg;
        return type === "text" && name === "text-shape";
      });
      if (!labelCfg) return;

      const labelBox = labelCfg.getBBox();
      // 展开收缩
      const cancelMerge = group.findById("cancel-merge");
      cancelMerge.attr({
        x: cfg.style.width / 2 - 46,
        y: labelBox.y + 14,
      });

      cfg.label = fittingString(cfg.labelText, cfg.style.width - 55, 16);
    },
    // 锚点（相关边的连入点）的数组,如果为 undefined，则没有锚点
    getAnchorPoints(cfg) {
      return undefined;
    },
  },
  "rect"
);
